<template>
  <div class="footer_container">
     <div class="footer_center" ref="footerCenter">
        <div class="footer_link" v-drag="greetlink" :style="setlinkStyle(propValue)">
            <div class="link_title" v-if="propValue.titleType">快速导航</div>
            <div class="link_item"  v-for="(item,i) of propValue.footerList" :key="i"><a :class="propValue.hoverClass?propValue.hoverClass:''" :href="item.link?item.link:'javascript:;'">{{item.name}}</a></div>
        </div>
        <div class="footer_childLink" v-drag="greetcontent" :style="setcontentStyle(propValue)" v-if="propValue.childrenMenu">
            <div class="link_title" v-if="propValue.titleType">{{propValue.childtitle}}</div>
            <div class="link_item"  v-for="(item,i) of propValue.childrenList" :key="i"><a :class="propValue.hoverClass?propValue.hoverClass:''"  :href="item.link?item.link:'javascript:;'">{{item.name}}</a></div>
        </div>
          <div class="footer_lianxi" v-drag="greetlx" :style="setlxStyle(propValue)">
             <div class="lianxi_title">联系方式</div>
             <div class="lianxi_item"  v-if="propValue.email">联系邮箱：{{propValue.email}}</div>
             <div class="lianxi_item"  v-if="propValue.phone">联系电话：{{propValue.phone}}</div>
             <div class="lianxi_item"  v-if="propValue.address">联系地址：{{propValue.address}}</div>
        </div>
        <div class="footer_erweima"  v-drag="greetimg" :style="setimgStyle(propValue)">
            <img  v-if="propValue.erweima" class="erweima" :src="propValue.erweima" alt="">
            <div  v-if="propValue.erweimaLabel" class="erweimalabel">{{propValue.erweimaLabel}}</div>
        </div>
     </div>
     <div class="footer_beian" >
        <a :href="propValue.beianlink ? propValue.beianlink : 'javascript:;'" :style="{'font-size':itemStyle.fontSize+'rem'}">{{propValue.beian}}</a>
        <img style="vertical-align:middle;margin-left:5rem;" src="https://ejartest.oss-cn-chengdu.aliyuncs.com/image/gswj.png" alt="">
     </div>
  </div>
</template>

<script>
export default {
 name: 'Footer',
   props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        swiperList: {
            type: Array,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
        itemStyle:''
    },
    data() {
        return {
            footerHeight:0,
        }
    },
    watch:{

    },

    mounted(){
        this.footerHeight=this.$refs.footerCenter.offsetHeight
            let HtmlHeight=Number($('.footer_container')[0].offsetParent.style.top.slice(0,-2))+Number($('.footer_container')[0].offsetParent.style.height.slice(0,-2))
            if(HtmlHeight){
                this.$EventBus.$emit('HtmlHeight',HtmlHeight)
            }
            console.log(this.$route)
    },
    methods:{
         greetlink(obj){
            if(this.$route.name=='preview'){return}
            this.propValue.linkTabTop=obj.y.slice(0,-2)+'rem'
            this.propValue.linkTabLeft=obj.x.slice(0,-2)+'rem'
        },
        greetcontent(obj){
            if(this.$route.name=='preview'){return}
             this.propValue.contentTabTop=obj.y.slice(0,-2)+'rem'
            this.propValue.contentTabLeft=obj.x.slice(0,-2)+'rem'
            console.log(this.propValue)
        },
        greetlx(obj){
            if(this.$route.name=='preview'){return}
          this.propValue.lxTabTop=obj.y.slice(0,-2)+'rem'
            this.propValue.lxTabLeft=obj.x.slice(0,-2)+'rem'
        },
        greetimg(obj){
            if(this.$route.path=='preview'){return}
             this.propValue.ImgTabTop=obj.y.slice(0,-2)+'rem'
            this.propValue.ImgTabLeft=obj.x.slice(0,-2)+'rem'
        },
        setlinkStyle(value){
            return{
                 top:value.linkTabTop.includes('rem')?value.linkTabTop:value.linkTabTop+'rem',
                left:value.linkTabLeft.includes('rem')?value.linkTabLeft:value.linkTabLeft+'rem',
                cursor:this.$route.name=='preview'?'':"move"
            }
        },
          setcontentStyle(value){
            return{
                top:value.contentTabTop.includes('rem')?value.contentTabTop:value.contentTabTop+'rem',
                left:value.contentTabLeft.includes('rem')?value.contentTabLeft:value.contentTabLeft+'rem',
                cursor:this.$route.name=='preview'?'':"move",

            }
        },
          setlxStyle(value){
            console.log(value)
            return{
                top:value.lxTabTop.includes('rem')?value.lxTabTop:value.lxTabTop+'rem',
                left:value.lxTabLeft.includes('rem')?value.lxTabLeft:value.lxTabLeft+'rem',
                cursor:this.$route.name=='preview'?'':"move"

            }
        },
         setimgStyle(value){
            return{
                top:value.ImgTabTop.includes('rem')?value.ImgTabTop:value.ImgTabTop+'rem',
                left:value.ImgTabLeft.includes('rem')?value.ImgTabLeft:value.ImgTabLeft+'rem',
                cursor:this.$route.name=='preview'?'':"move"
            }
        },
    }


}
</script>

<style scoped lang="scss">
.footer_container{
    // background: #0B162B;
    width: 100%; 
    position: relative;
    a{
        color: inherit;
    }
    .footer_center{
        width: 1200rem;
        margin:0 auto;
        height: 80%;
        border-bottom: 1px solid #353057;
        position: relative;
    }
    .footer_link{
        position: absolute;
        // left: 360rem;
        // top: 59rem;
    }
    .footer_childLink{
                position: absolute;
        // left: 637rem;
        // top: 59rem;

    }
    .link_item,.lianxi_item{
        font-size: 14rem;
        line-height: 2.3;
    }
    .link_title,.lianxi_title{
        font-size: 18rem;
        margin-bottom: 34rem;
    }
    .footer_lianxi{
        position: absolute;
        // top: 59rem;
        // left: 997rem;
    }
    .footer_erweima{
        position: absolute;
        top:59rem;
        left:1420rem;
        transition: .3s;
        .img{
            width:140rem;
            height: 140rem;
            margin-bottom: 10rem;
        }

        .erweimalabel{
            text-align: center;
        }
    }
    .footer_erweima:hover{
            transform: scale(1.1);
            cursor: pointer;
        }
    .footer_beian{
        text-align: center;
        margin-top: 20px;
    }
}

</style>
